<template>
    <div>
        <el-button @click="showDialog" size="small" type="primary">发布文章</el-button>
        <!-- 表格 -->
        <el-table :data="articles.list" style="width: 100%"> 
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="title" label="新闻标题" width="400"></el-table-column>
            <el-table-column prop="category.name" label="新闻分类" width="120"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" width="150">
                <template slot-scope="scope">
                    {{scope.row.publishTime | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="readTimes" label="阅读次数"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column prop="thumpUp" label="点赞次数"></el-table-column>
            <el-table-column label="操作" width="150" align="center" >
                <template slot-scope="scope">
                    <el-link :underline="false" @click="editHandler(scope.row)" style="margin-right:1rem">修改</el-link>
                    <el-link :underline="false" @click="deleteHandler(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            :page-size="params.pageSize"
            @current-change="pageChange"
            :total="articles.total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
            {{form}}
            <el-form :model="form" >
              <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="所属分类" :label-width="formLabelWidth">
                <el-select v-model="form.categoryId" placeholder="请选择活动区域">
                  <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="资讯" :label-width="formLabelWidth">
                <Tinymce v-model="form.content"></Tinymce>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveHandler">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Tinymce from '../../../components/Tinymce'
export default {
    components: {
        Tinymce
    },
    data() {
        return {
            params: {
                page: 1,
                pageSize: 5
            },
            form: {},
            dialogFormVisible: false,
            title: '',
            formLabelWidth: '120px'
        }
    },
    computed: {
        ...mapState("article",["articles"]),
        ...mapState("category",["categories"])
    },
    created() {
        this.queryArticles(this.params);
        this.findAllCategory()
    },
    watch: {
        params: {
            handler() {
                this.queryArticles(this.params)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions("article",["queryArticles","deleteArticle","saveOrUpdateArticle"]),
        ...mapActions("category",["findAllCategory"]),
        // 新增
        showDialog() {
            this.dialogFormVisible = true;
            this.title = "发布新闻资讯"
            this.form = {}
            if(tinymce.activeEditor) {
                tinymce.activeEditor.setContent("")
            }
        },
        // 保存
        saveHandler() {
            this.saveOrUpdateArticle(this.form).then(res => {
                this.queryArticles(this.params);
                this.dialogFormVisible = false
                this.$message({
                    message: res.message,
                    type: 'success'
                });
            })
        },
        // 修改
        editHandler(row) {
            this.dialogFormVisible = true;
            this.title = '修改新闻资讯';
            this.form = JSON.parse(JSON.stringify(row))
        },
        // 删除
        deleteHandler(id) {
            this.deleteArticle(id).then(res => {
                this.queryArticles(this.params);
                this.$message({
                    message: res.message,
                    type: 'success'
                });
            })
        },
        // 分页
        pageChange(page) {
            this.params.page = page
        }
    }
}
</script>